<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
      :dialogWidth="'750px'"
    >
      <div class="innerLoding">
        <el-row>
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            size="small"
          >
            <el-row>
              <el-col :span="20">
                <el-form-item label="部门：" prop="department_id">
                  <el-select
                    v-model="formData.department_id"
                    placeholder="请选择部门"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in prepareLineOption"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="20">
                <el-form-item label="姓名：" prop="nickname">
                  <el-input
                    placeholder="请输入姓名"
                    type="text"
                    clearable
                    v-model="formData.nickname"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="电话：" prop="phone">
                  <el-input
                    placeholder="请输入电话"
                    type="number"
                    clearable
                    v-model="formData.phone"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="座机：" prop="tel">
                  <el-input
                    placeholder="请输入座机号码"
                    type="text"
                    clearable
                    v-model="formData.tel"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20" v-if="formType==0">
                <el-form-item label="密码：" prop="password">
                  <el-input
                    placeholder="请输入密码"
                    type="text"
                    clearable
                    v-model="formData.password"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="职务：" prop="role_id">
                  <el-select
                    v-model="formData.role_id"
                    placeholder="请选择职务"
                    collapse-tags
                    multiple
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in userRoleOption"
                      :key="index"
                      :label="item.title"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="20">
                <el-form-item label="头像：" prop="head_img">
                  <uploadimg
                    :imgModel="formData"
                    @deleteimg="picturedel"
                    class="uploaditem"
                    @uploadimgok="pictureok"
                  >
                    <span slot="text">上传的图片大小不得超过10M</span>
                  </uploadimg>
                </el-form-item>
              </el-col>
              

            </el-row>
          </el-form>
        </el-row>
      </div>
    </commonformdialog>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";
import uploadimg from "@/components/uploadimg/uploadimg";

import { userCreate, userUpdate } from "@/api/userManagement";
export default {
  data() {
    return {
      showPicker: false,
      multipleopen: true,
      imgList: [],
      formData: {
        department_id: "",
        nickname: "",
        tel: "",
        phone: "",
        role_id:[]
      },
      rules: {
        department_id: [{ required: true, message: "请选择部门", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          {
              pattern: /^1(3|4|5|7|8|9|6)\d{9}$/,
              message: '手机号格式错误',
              trigger: 'blur',
            },
        ],
        tel: [
          { required: true, message: "请输入座机号码", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        role_id: [
          { required: true, message: "请输入选择职务", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
    prepareLineOption: {
      type: Array,
    },
    userRoleOption: {
      type: Array,
    },
    roleOptions: {
      type: Array,
    },
    dialogdata: {
      type: Object,
    },
  },
  components: {
    commonformdialog,
    uploadimg,
  },
  methods: {
    //删除图片
    picturedel() {
      this.formData.head_img = "";
    },
    //上传图片成功
    pictureok(val) {
      this.formData.head_img = val.url;
    },
    closetextDialog() {
      this.$emit("closedialog");
    },

    confirmbtn() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        let { department_id, nickname,phone, tel ,role_id,head_img} = this.formData;
        let params = { department_id, nickname,phone, tel ,role_id,head_img} 
        params.role_id=params.role_id.join(',')
        console.log(params);
        let data;
        if (this.formType == 0) {
          params.password=this.formData.password
          data = await userCreate(params);
        } else {
          params.id = this.formData.id;
          data = await userUpdate(params);
        }
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.$emit("confirm");
        }
      });
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      }
    },
    dialogdata: function (val) {
      this.formData = val;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  #InputSearch {
    display: none !important;
  }
  .grid-emojis {
    grid-template-columns: repeat(10, 10%) !important;
  }
  .small {
    position: absolute;
    z-index: 9;
    left: -45px;
    top: 30px;
  }
}
</style>
